<div class="blade-content ng-scope" id="blade-content">
  <div class="blade-inner">
    <div class="inner-block">
      <form name="form" class="form" (submit)="onCreate()" [formGroup]="formGroup" novalidate>
        <div class="blade-static __bottom" *ngIf="currentBlade.isNew">
          <button class="btn" [disabled]="!formGroup.valid">创建</button>
        </div>
        <div class="form-group">
          <label class="form-label">状态名称</label>
          <div class="form-input">
            <input name="stateName" formControlName="stateName" placeholder="输入状态名称" >
          </div>
          <div *ngIf="formErrors.stateName" class="form-error">
            {{ formErrors.stateName }}
          </div>
        </div>       
        
         <div class="columns">
          <div class="form-group column">
            <label class="form-label">颜色</label>
            <div class="form-input">
              <input #stateColor   placeholder="输入状态颜色值"  formControlName="stateColor" name="stateColor">
            </div>
            <div *ngIf="formErrors.stateColor" class="form-error">
              {{ formErrors.stateColor }}
            </div>
          </div>

          <div class="form-group column">
            <label class="form-label">颜色选择</label>
            <div class="form-input">
              <p-colorPicker formControlName="stateColor2"  ></p-colorPicker>
            </div>
            <div *ngIf="formErrors.stateColor" class="form-error transparent" >
              {{ formErrors.stateColor }}
            </div>
          </div>
        </div> 

        <div class="form-group">
          <label class="form-label">备注</label>
          <div class="form-input">
            <input name="remark" formControlName="remark" placeholder="输入备注">
          </div>
          <div *ngIf="formErrors.remark" class="form-error">
            {{ formErrors.remark }}
          </div>
        </div>
        <div class="form-group">
          <label class="form-label">是否报警</label>
          <div class="form-input" id="form-input-switch">
            <label class="form-label __switch">
                <input type="checkbox" name="unAlarm" formControlName="unAlarm" class="ng-pristine ng-untouched ng-valid">                        
                <span class="switch" ></span>
            </label>
          </div>
        </div>
        <div class="form-group">
          <label class="form-label">是否默认选中</label>
          <div class="form-input" id="form-input-switch">
            <label class="form-label __switch">
                <input type="checkbox" name="unChecked" formControlName="unChecked" class="ng-pristine ng-untouched ng-valid">                        
                <span class="switch" ></span>
            </label>
          </div>
        </div>
        <div class="form-group">
          <label class="form-label">排序</label>
          <div class="form-input">
            <input name="stateSeq" formControlName="stateSeq" placeholder="输入排序">
          </div>
          <div *ngIf="formErrors.stateSeq" class="form-error">
            {{ formErrors.stateSeq }}
          </div>
        </div>
      </form>
    </div>
  </div>
</div>
